.checked-ball{
  animation: expand-switch-right .3s linear forwards;
}
.not-checked-ball{
  animation: expand-switch-left .3s linear forwards;
}
@keyframes expand-switch-right {
  0%{left:3px;}
  30%,50%{left:3px;width:38px;}
  60%{left:27.5px;width:14px;}
  80%{left:19px;width:24px; }
  90%{left:24px;width:19px; }
  100%{left:23px;width:18px;}
}
@keyframes expand-switch-left {
  0%{left:23px;}
  30%,50%{left:3px;width:38px;}
  60%{right:24px;width:14px;}
  80%{right:19px;width:24px; }
  90%{right:27px;width:19px; }
  100%{left:3px;width:18px;}
}
